<template>
  <div>
    <el-row
      type="flex"
      justify="space-between"
      align="middle"
      style="margin-bottom: 10px"
    >
      <el-col :sm="3" :lg="2">项目简称：</el-col>
      <el-col :sm="3" :lg="4" :pull="1">
        <el-select style="width: 100%" v-model="projectId" placeholder="请选择">
          <el-option
            v-for="item in projectOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option> </el-select
      ></el-col>
      <el-col :sm="3" :lg="2">分项名称：</el-col>
      <el-col :sm="3" :lg="4" :pull="1">
        <el-select style="width: 100%" v-model="projectId" placeholder="请选择">
          <el-option
            v-for="item in projectOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option> </el-select
      ></el-col>
      <el-col :sm="3" :lg="2">计划状态：</el-col>
      <el-col :sm="3" :lg="4" :pull="1"
        ><el-select style="width: 100%" v-model="status" placeholder="请选择">
          <el-option label="未通过" :value="0"> </el-option>
          <el-option label="通过" :value="1"> </el-option>
          <el-option label="未审核" :value="2"> </el-option> </el-select
      ></el-col>
      <el-row :sm="3" :lg="2">关联计划：</el-row>
      <el-col :sm="3" :lg="4">
        <el-date-picker
          style="width: 100%"
          v-model="planCycle"
          type="datetime"
          placeholder="选择日期时间"
          default-time="12:00:00"
        >
        </el-date-picker
      ></el-col>
    </el-row>
    <el-row style="margin-bottom: 10px" type="flex" justify="space-between">
      <el-col :span="1">
        <el-button type="primary" icon="el-icon-plus" @click="addHandler">
          新增</el-button
        >
      </el-col>
      <el-col :span="3" style="text-align: right"
        ><el-button type="primary" @click="searchHandler">查询</el-button
        ><el-button plain @click="resetHandler">重置</el-button></el-col
      >
    </el-row>
    <el-row>
      <el-table
        :data="renderData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#606266', color: '#fff' }"
      >
        <el-table-column type="index" label="序号" width="55" align="center" />
        <el-table-column
          prop="projectShortName"
          label="项目简称"
          align="center"
          width="150"
        />
        <el-table-column
          prop="constructName"
          label="工程名称"
          align="center"
          width="150"
        />
        <el-table-column
          prop="branchName"
          label="分部工程名称"
          align="center"
          width="120"
        />
        <el-table-column
          prop="itemName"
          label="分项工程名称"
          align="center"
          width="120"
        />
        <el-table-column
          prop="constructDept"
          label="施工单位"
          align="center"
          width="100"
        />
        <el-table-column label="计划周期" align="center" width="190">
          <template slot-scope="scope">
            <p>{{ scope.row.planCycleStart }}</p>
            <p style="font-size: 0.8rem; color: rgb(200, 200, 200)">至</p>
            <p>{{ scope.row.planCycleEnd }}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="lineType"
          label="线别"
          align="center"
          width="80"
        />
        <el-table-column label="验收部位" align="center" width="170">
          <template slot-scope="scope">
            DK{{ scope.row.intervalStartKm }}+{{ scope.row.intervalStartM }} ~
            DK{{ scope.row.intervalEndKm }}+{{ scope.row.intervalEndM }}
          </template>
        </el-table-column>
        <el-table-column
          prop="mileage"
          label="施工里程"
          align="center"
          width="80"
        />
        <el-table-column
          prop="inspectMaterialVoList"
          label="消耗物资"
          align="center"
          min-width="200"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.inspectMaterialVoList.length == 0"
              style="color: rgb(199, 199, 199); font-size: 0.8rem"
              >暂无</span
            >
            <div v-else>
              <p v-for="item in scope.row.inspectMaterialVoList" :key="item.id">
                {{ item.name }} [{{ item.num + item.unit }}]
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          align="center"
          min-width="120"
        >
          <template slot-scope="scope">
            <el-button type="text">
              <span v-if="scope.row.status == 0" style="color: #f56c6c"
                >审核不通过</span
              >
              <span v-else-if="scope.row.status == 1" style="color: #67c23a"
                >审核通过</span
              >
              <span v-else style="color: #e6a23c">未审核</span>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="项目负责人"
          prop="projectLeaderName"
          width="100"
        />
        <el-table-column
          align="center"
          label="专业工长"
          prop="foremanName"
          width="100"
        />
        <el-table-column
          align="center"
          label="施工班组长"
          prop="teamLeaderName"
          width="100"
        />
        <el-table-column
          align="center"
          label="相关文件"
          prop="reportPath"
          min-width="200"
        >
          <template slot-scope="scope">
            <div
              v-if="scope.row.reportPath == null"
              style="color: rgb(199, 199, 199); font-size: 0.8rem"
            >
              暂无文件
            </div>
            <div v-else style="text-align: left">
              <span
                @click="showFile(scope.row)"
                class="pHover"
                title="点击下载"
              >
                检验批--{{ scope.row.branchName }}--DK{{
                  scope.row.intervalStartKm
                }}+{{ scope.row.intervalStartM }}~{{
                  scope.row.intervalEndKm
                }}+{{ scope.row.intervalEndM }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="附件列表"
          prop="annexList"
          min-width="200"
        >
          <template slot-scope="scope">
            <div
              v-if="
                scope.row.annexList.length == 0 || scope.row.annexList == null
              "
              style="color: rgb(199, 199, 199); font-size: 0.8rem"
            >
              暂无附件
            </div>
            <div v-else style="text-align: left">
              <span
                @click="showFile(item)"
                class="pHover"
                v-for="(item, index) in scope.row.annexList"
                :key="index"
                title="点击下载"
              >
                {{ item.name }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              style="color: red"
              @click="deleteHandler(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="position: absolute; right: 50px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
import { getInspectCheckPage } from "../../../http/inTellingSchedule/inspectBatch.js";
import { getProjectList, downloadFile } from "../../../http/commonApi.js";
// import { blobToBase64 } from '../../../utils/autoClick'
export default {
  data() {
    return {
      pageSize: 10,
      currentPage: 1,
      total: 0,
      isSearch: false,
      projectOptions: [
        {
          value: "测试项目1",
          label: "测试项目1",
        },
        {
          value: "测试项目2",
          label: "测试项目2",
        },
        {
          value: "测试项目3",
          label: "测试项目3",
        },
        {
          value: "测试项目4",
          label: "测试项目4",
        },
        {
          value: "测试项目5",
          label: "测试项目5",
        },
      ],
      projectId: null,
      status: null,
      planCycle: "",
      renderData: [],
      tableData: [
        {
          id: 1,
          project: "测试项目1",
          enginName: "工程名称1",
          davisName: "分部名称1",
          subItemName: "分项名称1",
          constructUnit: "施工单位1",
          planDate: ["2023-08-20", "2023-08-27"],
          workType: ["钢弹簧", "预制轨道板"],
          workTypeId: [1, 2],
          lineType: "左线",
          startKm: 11,
          startM: 11,
          endKm: 22,
          endM: 22,
          workMileage: "22",
          consumerMater: [
            {
              id: 1,
              name: "道岔组件",
              unit: "10件",
            },
            {
              id: 2,
              name: "混凝土",
              unit: "20吨",
            },
            {
              id: 3,
              name: "扣件",
              unit: "5件",
            },
          ],
          status: 0, //0未审核 1审核通过 2审核不通过
          boss: "张三",
          foreman: "李四",
          teamLeader: "王五",
          relayDocument: [
            {
              name: "测试文件.doc",
              size: 10240,
              type: "application/msword",
              filePath: "../../../assets/files/测试文件.doc",
            },
          ],
        },
        {
          id: 2,
          project: "测试项目2",
          enginName: "工程名称2",
          davisName: "分部名称2",
          subItemName: "分项名称2",
          constructUnit: "施工单位2",
          planDate: ["2023-08-20", "2023-08-27"],
          workType: ["钢弹簧", "预制轨道板"],
          workTypeId: [1, 2],
          lineType: "左线",
          startKm: 11,
          startM: 11,
          endKm: 22,
          endM: 22,
          workMileage: "22",
          consumerMater: [
            {
              id: 1,
              name: "道岔组件",
              unit: "10件",
            },
            {
              id: 2,
              name: "混凝土",
              unit: "20吨",
            },
            {
              id: 3,
              name: "扣件",
              unit: "5件",
            },
          ],
          status: 1, //0未审核 1审核通过 2审核不通过
          boss: "张三",
          foreman: "李四",
          teamLeader: "王五",
          relayDocument: null,
        },
        {
          id: 3,
          project: "测试项目3",
          enginName: "工程名称3",
          davisName: "分部名称3",
          subItemName: "分项名称3",
          constructUnit: "施工单位3",
          planDate: ["2023-08-20", "2023-08-27"],
          workType: ["钢弹簧", "预制轨道板", "预制混凝土"],
          workTypeId: [1, 2, 3],
          lineType: "左线",
          startKm: 11,
          startM: 11,
          endKm: 22,
          endM: 22,
          workMileage: "22",
          consumerMater: [
            {
              id: 1,
              name: "道岔组件",
              unit: "10件",
            },
            {
              id: 2,
              name: "混凝土",
              unit: "20吨",
            },
            {
              id: 3,
              name: "扣件",
              unit: "5件",
            },
          ],
          status: 2, //0未审核 1审核通过 2审核不通过
          boss: "张三",
          foreman: "李四",
          teamLeader: "王五",
          relayDocument: null,
        },
      ],
      manOptions: [
        {
          id: 1,
          name: "张三",
        },
        {
          id: 2,
          name: "李四",
        },
        {
          id: 3,
          name: "王五",
        },
        {
          id: 4,
          name: "张二",
        },
        {
          id: 5,
          name: "张四",
        },
        {
          id: 6,
          name: "张五",
        },
      ],
      workTypeOptions: [
        {
          id: 1,
          name: "钢弹簧",
        },
        {
          id: 2,
          name: "预制轨道板",
        },
        {
          id: 3,
          name: "预制混凝土",
        },
      ],
      addArr: null,
    };
  },

  mounted() {
    this.getProjectListApi();
    this.getInspectCheckPageApi();
  },

  methods: {
    // 新增
    addHandler() {
      this.$router.push("/addInspectBatch");
    },
    // 查询
    searchHandler() {
      this.isSearch = true;
      this.getInspectCheckPageApi(
        1,
        this.pageSize,
        this.projectId,
        this.itemId,
        this.status,
        this.planCycle
      );
    },
    // 重置
    resetHandler() {
      this.isSearch = false;
      this.projectId = null;
      this.itemId = null;
      this.status = null;
      this.planCycle = "";
      this.currentPage = 1;
      this.pageSize = 10;
      this.getInspectCheckPageApi();
    },
    // 每页几条
    handleSizeChange(v) {
      this.pageSize = v;
      if (this.isSearch === true) {
        this.getInspectCheckPageApi(
          1,
          v,
          this.projectId,
          this.itemId,
          this.status,
          this.planCyle
        );
      } else {
        this.getInspectCheckPageApi(1, v);
      }
    },
    // 分页
    handleCurrentChange(v) {
      this.currentPage = v;
      if (this.isSearch === true) {
        this.getInspectCheckPageApi(
          v,
          this.pageSize,
          this.projectId,
          this.itemId,
          this.status,
          this.planCyle
        );
      } else {
        this.getInspectCheckPageApi(v, this.pageSize);
      }
    },
    // 编辑
    editHandler(row) {
      this.$router.push({
        name: "addInspectBatch",
        params: row,
      });
    },
    deleteHandler(id) {
      this.renderData = this.renderData.filter((el) => {
        return el.id !== id;
      });
    },
    //获取文件对象
    getFile(event, id) {
      this.addArr = [];
      console.log("id::: ", id);
      var file = event.target.files;
      for (var i = 0; i < file.length; i++) {
        //    上传类型判断
        var imgName = file[i].name;
        var idx = imgName.lastIndexOf(".");
        if (idx != -1) {
          var ext = imgName.substr(idx + 1).toUpperCase();
          ext = ext.toLowerCase();
          if (ext != "pdf" && ext != "doc" && ext != "docx" && ext != "xls") {
            this.$message.error(
              "文件格式不正确，请重新上传格式为doc、docx、xls、pdf的文件"
            );
          } else {
            const filePath = URL.createObjectURL(file[i]);
            file[i].filePath = filePath;
            this.addArr.push(file[i]);
          }
        }
      }
      if (this.editForm.id !== null) {
        if (this.editForm.relayDocument === null) {
          this.editForm.relayDocument = this.addArr;
        } else {
          for (let i = 0; i < this.addArr.length; i++) {
            let isDuplicate = false;
            for (let j = 0; j < this.editForm.relayDocument.length; j++) {
              if (this.addArr[i].name === this.editForm.relayDocument[j].name) {
                isDuplicate = true;
                break;
              }
              if (!isDuplicate) {
                this.editForm.relayDocument.push(this.addArr[i]);
              }
            }
          }
        }
      } else {
        if (this.editForm.relayDocument === null) {
          this.editForm.relayDocument = this.addArr;
        } else {
          for (let i = 0; i < this.addArr.length; i++) {
            let isDuplicate = false;
            for (let j = 0; j < this.editForm.relayDocument.length; j++) {
              if (this.addArr[i].name === this.editForm.relayDocument[j].name) {
                isDuplicate = true;
                break;
              }
              if (!isDuplicate) {
                this.editForm.relayDocument.push(this.addArr[i]);
              }
            }
          }
        }
      }
    },
    uploadFile() {
      document.getElementById("file").click();
    },
    // 文件下载
    showFile(v) {
      downloadFile({ path: v.reportPath }).then((res) => {
        let url = URL.createObjectURL(res);
        // 创建a 标签
        const a = document.createElement("a");
        const e = document.createEvent("MouseEvents"); // 创建鼠标事件对象
        e.initEvent("click", false, false); // 初始化事件对象
        a.href = url; // 设置下载地址
        a.download = `检验批--${v.branchName}--DK${v.intervalStartKm}+${v.intervalStartM}~${v.intervalEndKm}+${v.intervalEndM}.docx`; // 设置下载文件名
        a.dispatchEvent(e);
      });
    },
    /**
     * 接口
     */
    // 获取项目列表
    getProjectListApi() {
      getProjectList().then((res) => {
        if (res.code == 200) {
          this.projectOptions = res.data;
        }
      });
    },
    // 分页查询
    getInspectCheckPageApi(
      pageNum = 1,
      pageSize = 10,
      projectId = null,
      itemId = null,
      status = null,
      planCyle = ""
    ) {
      1;
      let params = { pageNum, pageSize, projectId, itemId, status, planCyle };
      getInspectCheckPage(params).then((res) => {
        if (res.code == 200) {
          this.renderData = res.data.records;
          this.total = res.total;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.el-dialog__header) {
  background-color: rgb(43, 43, 53);
}
:deep(.el-dialog__title) {
  color: #fff;
}
.uploadBtn {
  display: none;
}
.el-form-item {
  height: 30px;
  line-height: 30px;
}
.pHover {
  display: inline-block;
  cursor: pointer;
  color: #4ea1db;
  font-size: 0.8rem;
  box-sizing: border-box;
}
.pHover:hover {
  color: #ca0c16;
  box-sizing: border-box;
  border-bottom: 1px solid #ca0c16;
}
</style>
